<template>
	<uni-popup ref="popupRef" type="bottom" background-color="#fff" borderRadius="25rpx 25rpx 0 0" :animation="true">
		<view class="popupBox">
			<view class="Customer-number">
				<text>客服电话:</text>
				<text class="numtext" @click="makePhoneCall('1583445845')">1583445845</text>
			</view>
			<button class="Online-button" open-type="contact">
				在线客服
			</button>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref, defineExpose } from 'vue';

	const popupRef = ref(null);

	// 暴露方法给父组件
	defineExpose({
		showPopup() {
			if (popupRef.value) {
				popupRef.value.open(); 
			}
		},
		hidePopup() {
			if (popupRef.value) {
				popupRef.value.close();
			}
		}
	});
	// 拨打电话
	const makePhoneCall = (phoneNumber) => {
		uni.makePhoneCall({
			phoneNumber: phoneNumber,
			success: () => {
				console.log('成功拨打', phoneNumber);
			},
			fail: (error) => {
				console.error('拨打失败:', error);
			}
		});
	};
</script>
<style lang="scss" scoped>
	.popupBox{
		width: 100%;
		height: 100%;
		padding: 90rpx 0 90rpx 0;
		background: #FFFFFF;
		border-radius: 25rpx 25rpx 0 0;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
		.Customer-number{
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 20rpx;
			text{
				display: block;
				font-size: 32rpx;
				color: #000;
				font-family: Lantinghei SC, Lantinghei SC;
			}
			.numtext{
				font-weight: 600;
				width: fit-content;
				padding: 0 10rpx;
				color: rgba(0,19,76,0.6);
			}
		}
		.Online-button{
			width: 60vw;
			background-color: #000;
			color: #fff;
		}
	}
</style>